<template>
  <div id="store_detail">
    <div class="storelist">
      <el-table
        border
        :data="storelist"
        :stripe="true"
        :header-row-style="{height:'20px'}"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        @row-click="selectRow"
        tooltip-effect="light"
        highlight-current-row
        height="800px"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="仓库编码"></el-table-column>
        <el-table-column prop="name" label="仓库名称"></el-table-column>
        <el-table-column prop="address" label="仓库地址"></el-table-column>
      </el-table>
    </div>
    <div class="detail">
      <div class="detail_box1 box">
        <div class="header">在库明细</div>
        <div class="body">
          <el-table
            border
            :data="insidelist"
            :stripe="true"
            :header-row-style="{height:'20px'}"
            :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
            :row-style="{height:'5px'}"
            :cell-style="{padding:'5px 0'}"
            tooltip-effect="light"
            highlight-current-row
            height="330px"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="goodcode" show-overflow-tooltip label="商品编码"></el-table-column>
            <el-table-column prop="goodname" show-overflow-tooltip label="商品名称"></el-table-column>
            <el-table-column prop="count" show-overflow-tooltip label="数量"></el-table-column>
            <el-table-column prop="zijin" show-overflow-tooltip label="涉及资金"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail_box2 box">
        <div class="header">借出明细</div>
        <div class="body">
          <el-table
            border
            :data="borrowlist"
            :stripe="true"
            :header-row-style="{height:'20px'}"
            :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
            :row-style="{height:'5px'}"
            :cell-style="{padding:'5px 0'}"
            tooltip-effect="light"
            highlight-current-row
            height="330px"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
           <el-table-column prop="goodcode" show-overflow-tooltip label="商品编码"></el-table-column>
            <el-table-column prop="goodname" show-overflow-tooltip label="商品名称"></el-table-column>
            <el-table-column prop="count" show-overflow-tooltip label="数量"></el-table-column>
            <el-table-column prop="zijin" show-overflow-tooltip label="涉及资金"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail_box3 box">
        <div class="header">调出明细</div>
        <div class="body">
          <el-table
            border
            :data="outlist"
            :stripe="true"
            :header-row-style="{height:'20px'}"
            :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
            :row-style="{height:'5px'}"
            :cell-style="{padding:'5px 0'}"
            tooltip-effect="light"
            highlight-current-row
            height="330px"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
             <el-table-column prop="goodcode" show-overflow-tooltip label="商品编码"></el-table-column>
            <el-table-column prop="goodname" show-overflow-tooltip label="商品名称"></el-table-column>
            <el-table-column prop="count" show-overflow-tooltip label="数量"></el-table-column>
            <el-table-column prop="zijin" show-overflow-tooltip label="涉及资金"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail_box4 box">
        <div class="header">报废明细</div>
        <div class="body">
          <el-table
            border
            :data="scraplist"
            :stripe="true"
            :header-row-style="{height:'20px'}"
            :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
            :row-style="{height:'5px'}"
            :cell-style="{padding:'5px 0'}"
            tooltip-effect="light"
            highlight-current-row
            height="330px"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
           <el-table-column prop="goodcode" show-overflow-tooltip label="商品编码"></el-table-column>
            <el-table-column prop="goodname" show-overflow-tooltip label="商品名称"></el-table-column>
            <el-table-column prop="count" show-overflow-tooltip label="数量"></el-table-column>
            <el-table-column prop="zijin" show-overflow-tooltip label="涉及资金"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail:[],
      storelist: [],
      insidelist: [],
      borrowlist: [],
      outlist: [],
      scraplist: [],

    };
  },
  created() {
    this.$http.get("/store/list").then(response => {
      this.storelist = response.data;
    });
    
    
  },
  methods: {
    selectRow(Row) {
      window.console.log(Row);
      this.refresh_detail(Row.id);
      this.storename = Row.name;
      this.isSelect = true;
    },
    refresh_detail(id) {
      window.console.log('id',id);
      this.insidelist.splice(0,this.insidelist.length);
      this.borrowlist.splice(0,this.borrowlist.length);
      this.outlist.splice(0,this.outlist.length);
      this.scraplist.splice(0,this.scraplist.length);
      this.$http.post("assetDetail/list", { storeid: id }).then(response => {
        let llist = response.data
        window.console.log('llist',llist);
        
        llist.forEach(row =>{
          switch(row.statu  ){
            case '在库':{
              this.insidelist.push(row)
              break;
            }
            case '借出':{
              this.borrowlist.push(row)
              break;
            }
            case '调出':{
              this.outlist.push(row)
              break;
            }
            case '报废':{
              this.scraplist.push(row)
              break;
            }
          }
        })
      });
    }
  }
};
</script>

<style>
#store_detail .storelist {
  width: 20%;
  float: left;
}
#store_detail .detail {
  width: 78%;
  height: 800px;
  /* background-color: red; */
  float: right;
  position: relative;
}
#store_detail .detail_box1 {
  background-color: rgba(224, 224, 255, 0.329);
  position: absolute;
  top: 1%;
  left: 1%;
}
#store_detail .detail_box2 {
  background-color: rgba(224, 224, 255, 0.329);
  position: absolute;
  top: 1%;
  right: 1%;
}
#store_detail .detail_box3 {
  background-color: rgba(224, 224, 255, 0.329);
  position: absolute;
  bottom: 1%;
  left: 1%;
}
#store_detail .detail_box4 {
  background-color: rgba(224, 224, 255, 0.329);
  position: absolute;
  bottom: 1%;
  right: 1%;
}
#store_detail .box {
  height: 350px;
  width: 45%;
  height: 47%;
  /* border-radius: 0px; */
}
#store_detail .header {
  margin: 10px auto;
  height: 20px;
  font-weight: bolder;
  text-align: center;
  background-color: rgb(243, 242, 241);
}
#store_detail .body {
  margin: 10px auto;
  height: 330px;
  font-weight: bolder;
  text-align: center;
  /* background-color: skyblue; */
}
</style>